<template>
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide>
      <div class="sw-content"><img src="./banner-ct01.png" alt="" /></div>
      <img src="./banner01.jpg" alt="" class="banner" />
    </swiper-slide>
    <swiper-slide
      ><img src="./banner01.jpg" alt="" />
      <div class="sw-content"><img src="./banner-ct01.png" alt="" /></div>
      <img src="./banner01.jpg" alt="" class="banner" />
    </swiper-slide>
    <swiper-slide><img src="./banner01.jpg" alt="" /> </swiper-slide>

    <div class="swiper-pagination" slot="pagination"></div>
    <!-- <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div> -->
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
export default {
  name: 'swiper-example-loop',
  title: 'Loop mode / Infinite loop',
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev',
        // },
      },
    };
  },
};
</script>
<style scoped>
.swiper {
  position: relative;
}
.swiper-slide {
  width: 100%;
  height: 500px;
  position: relative;
}
.banner {
  height: 500px;
  width: 100%;
  background-size: cover;
}
.sw-content {
  height: 500px;
  position: absolute;
  left: 50%;
  top: 140px;
  z-index: 100;
}
.sw-content img {
  transform: translateX(-50%);
  width: 492px;
  height: 223px;
}
.swiper-pagination {
  position: absolute;
  width: 154px;
  height: 20px;
  left: calc(50% - 77px);
}
.swiper-container-horizontal /deep/ span.swiper-pagination-bullet {
  width: 18px;
  height: 18px;
  margin-right: 16px;
  background-color: #fff;
  border: 1px solid #9b9b9b;
}
.swiper-container-horizontal /deep/ span.swiper-pagination-bullet-active {
  background-color: #4b943d;
}
</style>
